<template>
  <div class="question-area">
    <span class="number" v-if="showNumber">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
    <span style="margin-left: 5px" v-if="question.score"
      >({{ question.score }}分)</span
    >
  </div>
  <div class="remark" v-if="question.remark">
    <span> {{ question.remark }} </span>
  </div>
  <div class="answer-area">
    <!-- <el-input
      v-model="answer"
      placeholder="请输入内容"
      v-if="question.row == '1'"
    ></el-input>
    <el-input
      type="textarea"
      :autosize="true"
      placeholder="请输入内容"
      v-model="answer"
      v-else
    >
    </el-input> -->
    <el-input
      v-model="answer"
      placeholder="请输入内容"
      v-if="question.row == '1' && !question.is_positioning"
    ></el-input>
    <el-input
      type="textarea"
      :autosize="true"
      placeholder="请输入内容"
      v-model="answer"
      v-else-if="question.row == '2' && !question.is_positioning"
    >
    </el-input>
    <div v-else>
      <el-button @click="sendIp" v-if="!answer">点击获取地理信息</el-button>
      <span v-else> {{ answer }} </span>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    props: {
      question: Object,
      number: Number,
      changeAnswers: Function,
      saveAnswer: Function,
      showNumber: Boolean,
    },
    data() {
      return {
        answer: "",
        available: false,
      };
    },
    methods: {
      async sendIp() {
        await this.$confirm("问卷将获取您的位置信息，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios
              .post("getaddress/", { ip: localStorage.getItem("Ip") })
              .then((response) => {
                this.answer = response.data.answer;
              });
            this.$message({
              type: "success",
              message: "获取成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消获取信息",
            });
          });
      },
    },
    created() {
      // console.log('question什么样子')
      // console.log(this.question)
      this.answer = this.question.fill;
      this.available = true;
    },
    watch: {
      // 监听答案的变化
      // 并改变原来问卷中的答案部分
      answer: function (newVal) {
        if (this.available) {
          this.changeAnswers(this.number, newVal);
          if (this.saveAnswer) {
            console.log("fill");
            this.saveAnswer();
          }
        }
      },
    },
  };
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}

.remark {
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}
</style>